<template>
  <van-nav-bar
      title="发货列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div v-for="item in list" :key="item">
    <van-card
        num="1"
        :price="item.price"
        :title="item.goods.name"
        :thumb="'http://local.bs.com/storage/'+item.goods.image"
        origin-price="10.00"
    >
      <template #footer>
        <van-button v-if="item.status==2" @click="showContent(item.id)">发货</van-button>
      </template>
    </van-card>
  </div>
  <van-overlay :show="show" @click="show = false">
    <div class="wrapper" @click.stop>
     <div>
       <van-form @submit="onSubmit">
         <van-field
             type="textarea"
             rows="3"
             v-model="content"
             name="content"
             label="请输入发货信息"
             placeholder="请输入发货信息(账号密码等）"
             :rules="[{ required: true, message: '请输入发货信息(账号密码等）' }]"
         />
         <div style="margin: 16px;">
           <van-button round block type="primary" @click="sendOrder()">
             提交
           </van-button>
         </div>
       </van-form>
     </div>
    </div>
  </van-overlay>
  <van-pagination v-model="currentPage" :total-items="total" :items-per-page="15" @change="pageClick"/>
  <van-divider></van-divider>
</template>

<script>
import {send,waitSendList} from "@/api/order";
import {Toast} from "vant";

export default {
  name: "WaitSend",
  data(){
    return {
      list:{},
      show:false,
      content:"",
      id:0,
    }
  },
  created() {
    waitSendList().then((res)=>{
      this.list = res.data
    })
  },
  methods: {
    onClickLeft() {
      history.back()
    },
    showContent(id){
      this.id=id
      this.show = true
    },
    sendOrder(){
      console.log(this.id)
      send(this.id,this.content).then((res)=>{
        console.log(res)
        Toast.success("操作成功");
        this.show = false
        this.$router.go(0)
      })
    }
  }
}
</script>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
